<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>demo</title>
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/colresizable@1.6.0/colResizable-1.6.min.js"></script> <!-- 拖动调整列宽 -->
<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/extensions/resizable/bootstrap-table-resizable.min.js"></script>


<!—如果想使用中文版也可以引入以下语言包 -->
<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>
</head>

<body>
<div class='container'>
<h1>鼠标拖动调节列的宽</h1>
<table id="table">
	<tbody>
		<tr data-index="0">
			<td style="">1</td>
			<td style="" rowspan="2">Item 1</td>
			<td style="" rowspan="2">$1</td>
		</tr>
		<tr data-index="1">
			<td style="">2</td>
			<!-- <td style="">Item 2</td>
			<td style="">$2</td> -->
		</tr>
		<tr data-index="2">
			<td style="">2</td>
			<td style="">Item 2</td>
			<td style="">$2</td>
		</tr>
		<tr data-index="3">
			<td style="" colspan="3">2</td>
			<!-- <td style="">Item 2</td>
			<td style="">$2</td> -->
		</tr>
		<tr data-index="4">
			<td style="">2</td>
			<td style="">Item 2</td>
			<td style="">$2</td>
		</tr>
		<tr data-index="5">
			<td style="">2</td>
			<td style="">Item 2</td>
			<td style="">$2</td>
		</tr>
		<tr data-index="6">
			<td style="">2</td>
			<td style="">Item 2</td>
			<td style="">$2</td>
		</tr>
		<tr data-index="7">
			<td style="">2</td>
			<td style="">Item 2</td>
			<td style="">$2</td>
		</tr>
		<tr data-index="8">
			<td style="">2</td>
			<td style="">Item 2</td>
			<td style="">$2</td>
		</tr>
		<tr data-index="9">
			<td style="">2</td>
			<td style="">Item 2</td>
			<td style="">$2</td>
		</tr>
		<tr data-index="10">
			<td style="">2</td>
			<td style="">Item 2</td>
			<td style="">$2</td>
		</tr>
		<tr data-index="11">
			<td style="">2</td>
			<td style="">Item 2</td>
			<td style="">$2</td>
		</tr>
		<tr data-index="12">
			<td style="">2</td>
			<td style="">Item 2</td>
			<td style="">$2</td>
		</tr>
		<tr data-index="13">
			<td style="">2</td>
			<td style="">Item 2</td>
			<td style="">$2</td>
		</tr>
		<tr data-index="14">
			<td style="">2</td>
			<td style="">Item 2</td>
			<td style="">$2</td>
		</tr>
		<tr data-index="15">
			<td style="">2</td>
			<td style="">Item 2</td>
			<td style="">$2</td>
		</tr>
		<tr data-index="16">
			<td style="">2</td>
			<td style="">Item 2</td>
			<td style="">$2</td>
		</tr>
		<tr data-index="17">
			<td style="">2</td>
			<td style="">Item 2</td>
			<td style="">$2</td>
		</tr>
		<tr data-index="18">
			<td style="">2</td>
			<td style="">Item 2</td>
			<td style="">$2</td>
		</tr>
		<tr data-index="19">
			<td style="">2</td>
			<td style="">Item 2</td>
			<td style="">$2</td>
		</tr>
		<tr data-index="20">
			<td style="">2</td>
			<td style="">Item 2</td>
			<td style="">$2</td>
		</tr>
		<tr data-index="21">
			<td style="">2</td>
			<td style="">Item 2</td>
			<td style="">$2</td>
		</tr>
		<tr data-index="22">
			<td style="">2</td>
			<td style="">Item 2</td>
			<td style="">$2</td>
		</tr>
		
	</tbody>
</table>
</div>
<script>
$(function(){
	$('#table').bootstrapTable({
		resizable:true,
		stickyHeader: true,
		stickyHeaderOffsetY: '0px',
		pagination : true,	// 是否启用分页

		columns: [{
			field: 'id',
			title: 'Item ID'
		}, {
			field: 'name',
			title: 'Item Name'
		}, {
			field: 'price',
			title: 'Item Price'
		}],
		// data: [{
		// 	id: 1,
		// 	name: 'Item 1',
		// 	price: '$1'
		// }, {
		// 	id: 2,
		// 	name: 'Item 2',
		// 	price: '$2'
		// }, {
		// 	id: 2,
		// 	name: 'Item 2',
		// 	price: '$2'
		// }, {
		// 	id: 2,
		// 	name: 'Item 2',
		// 	price: '$2'
		// }, {
		// 	id: 2,
		// 	name: 'Item 2',
		// 	price: '$2'
		// }, {
		// 	id: 2,
		// 	name: 'Item 2',
		// 	price: '$2'
		// }, {
		// 	id: 2,
		// 	name: 'Item 2',
		// 	price: '$2'
		// }, {
		// 	id: 2,
		// 	name: 'Item 2',
		// 	price: '$2'
		// }, {
		// 	id: 2,
		// 	name: 'Item 2',
		// 	price: '$2'
		// }, {
		// 	id: 2,
		// 	name: 'Item 2',
		// 	price: '$2'
		// }, {
		// 	id: 2,
		// 	name: 'Item 2',
		// 	price: '$2'
		// }, {
		// 	id: 2,
		// 	name: 'Item 2',
		// 	price: '$2'
		// }, {
		// 	id: 2,
		// 	name: 'Item 2',
		// 	price: '$2'
		// }, {
		// 	id: 2,
		// 	name: 'Item 2',
		// 	price: '$2'
		// }, {
		// 	id: 2,
		// 	name: 'Item 2',
		// 	price: '$2'
		// }, {
		// 	id: 2,
		// 	name: 'Item 2',
		// 	price: '$2'
		// }, {
		// 	id: 2,
		// 	name: 'Item 2',
		// 	price: '$2'
		// }, {
		// 	id: 2,
		// 	name: 'Item 2',
		// 	price: '$2'
		// }, {
		// 	id: 2,
		// 	name: 'Item 2',
		// 	price: '$2'
		// }, {
		// 	id: 2,
		// 	name: 'Item 2',
		// 	price: '$2'
		// }, {
		// 	id: 2,
		// 	name: 'Item 2',
		// 	price: '$2'
		// }, {
		// 	id: 2,
		// 	name: 'Item 2',
		// 	price: '$2'
		// }, {
		// 	id: 2,
		// 	name: 'Item 2',
		// 	price: '$2'
		// }, {
		// 	id: 2,
		// 	name: 'Item 2',
		// 	price: '$2'
		// }, {
		// 	id: 2,
		// 	name: 'Item 2',
		// 	price: '$2'
		// }
		// ]
	});
});
</script>
</body>
</html>